<template>
  <div class="add-address">
    <div class="s-c-v" @click="searchStrict">
      <span>{{ strictName }}</span>
      <span><img src="../assets/img/更多拷贝@2x.png" alt=""/></span>
    </div>

    <div class="s-c-v" @click="searchCommunity">
      <span>{{ communityName }}</span>
      <span><img src="../assets/img/更多拷贝@2x.png" alt=""/></span>
    </div>

    <div class="s-c-v" @click="searchVillage">
      <span>{{ villageName }}</span>
      <span><img src="../assets/img/更多拷贝@2x.png" alt=""/></span>
    </div>

    <div class="detail-address">
      <span>请输入详细地址</span>
      <textarea
        placeholder="目前仅支持杭州市内上门回收服务..."
        name=""
        id=""
        cols="30"
        rows="10"
        maxlength="200"
        v-model="detailAddress"
      ></textarea>
    </div>

    <div class="page-search" ref="pageSearch">
      <div class="before" @click="hideToast"></div>
      <mt-search
        autofocus
        v-model="searchValue"
        @keyup.enter.native="search"
        cancel-text="取消"
      >
      </mt-search>
      <!-- 街道列表 -->
      <div
        style="position: absolute;top: 51px;width: 100%;"
        class="addressList"
        v-if="isShow"
      >
        <mt-cell
          v-for="item of strictList"
          :key="item.id"
          :title="item.name"
          @click.native="select(item)"
        />
      </div>

      <!-- 社区列表 -->
      <div
        style="position: absolute;top: 51px;width: 100%;"
        class="addressList"
        v-if="isShow1"
      >
        <mt-cell
          v-for="item of communityList"
          :key="item.id"
          :title="item.name"
          @click.native="select1(item)"
        />
      </div>

      <!-- 小区列表 -->
      <div
        style="position: absolute;top: 51px;width: 100%;"
        class="addressList"
        v-if="isShow2"
      >
        <mt-cell
          v-for="item of villageList"
          :key="item.id"
          :title="item.name"
          @click.native="select2(item)"
        />
      </div>
    </div>

    <div class="save" ref="save">
      <button @click="save">保存</button>
    </div>
  </div>
</template>
<script>
import { openid } from "../config";
export default {
  name: "AddAddress",
  created() {
    if (this.$route.query.a == "edit") {
      console.log("编辑操作", this.$route.query.id);
      // 获取地址信息
      this.getAddressInfo(this.$route.query.id);
    } else if (this.$route.query.a == "add") {
      console.log("新增操作");
    }
    console.log(111);
  },
  beforeRouteEnter(to, from, next) {
    // console.log(from);
    // next();
    console.log(to, from, next);
    next((vm) => {
      console.log(vm);
      vm.fromPage = from.name;
    });
  },
  watch: {
    $route: function(newRoute, oldRoute) {
      if (newRoute.query.a == "add") {
        console.log("新增操作");
        this.strictName = "请选择街道";
        this.strictId = "";
        this.communityName = "请选择社区";
        this.communityId = "";
        this.villageName = "请选择小区";
        this.villageId = "";
        this.detailAddress = "";
      } else if (newRoute.query.a == "edit") {
        console.log("编辑操作", newRoute.query.id);
        // 获取地址信息
        this.getAddressInfo(this.$route.query.id);
      }
    },
  },
  methods: {
    getAddressInfo(id) {
      this.$axios
        .get(`/wx/recycleAddress/${id}`, {
          params: {
            id,
          },
        })
        .then(({ data: res }) => {
          if (res.code != 0) {
            return this.$toast({
              message: res.msg,
              position: "middle",
              duration: 1500,
            });
          }
          this.strictName = res.data.subDistrict;
          this.strictId = res.data.subDistrictId;
          this.communityName = res.data.communityName;
          this.communityId = res.data.communityId;
          this.villageName = res.data.villageName;
          this.villageId = res.data.villageId;
          this.detailAddress = res.data.address;
          console.log(res);
        })
        .catch(() => {});
    },
    searchVillage() {
      if (!this.communityId) {
        return this.$toast({
          message: "请先选择社区",
          position: "middle",
          duration: 1500,
        });
      }
      this.isShow = false;
      this.isShow1 = false;
      this.$refs.save.style.zIndex = -1;
      this.$refs.pageSearch.style.display = "block";
      this.searchValue = "";
      //  获取小区数据
      this.getVillageList();
    },
    searchCommunity() {
      if (!this.strictId) {
        return this.$toast({
          message: "请先选择街道",
          position: "middle",
          duration: 1500,
        });
      }
      this.isShow = false;
      this.isShow2 = false;
      this.$refs.save.style.zIndex = -1;
      this.$refs.pageSearch.style.display = "block";
      this.searchValue = "";
      // 获取社区数据
      this.getCommunityList();
    },
    searchStrict() {
      this.isShow1 = false;
      this.isShow2 = false;
      this.$refs.save.style.zIndex = -1;
      this.$refs.pageSearch.style.display = "block";
      this.searchValue = "";
      // 获取街道数据
      this.getStrictList();
    },
    getVillageList() {
      this.isShow2 = true;
      this.$axios
        .get("/subdistrict/page", {
          params: {
            parentId: this.communityId,
          },
        })
        .then(({ data: res }) => {
          console.log("小区数据", res);
          if (res.code != 0) {
            return;
          }
          this.villageList = res.data.list;
        })
        .catch(() => {});
    },
    getCommunityList() {
      this.isShow1 = true;
      this.$axios
        .get("/subdistrict/page", {
          params: {
            parentId: this.strictId,
          },
        })
        .then(({ data: res }) => {
          if (res.code != 0) {
            return this.$toast({
              message: res.msg,
              position: "middle",
              duration: 1500,
            });
          }
          this.communityList = res.data.list;

          console.log("街道数据", res);
        })
        .catch(() => {});
    },
    getStrictList() {
      this.isShow = true;
      this.$axios
        .get("/subdistrict/page", {
          params: {
            parentId: 0,
          },
        })
        .then(({ data: res }) => {
          if (res.code != 0) {
            return this.$toast({
              message: res.msg,
              position: "middle",
              duration: 1500,
            });
          }
          this.strictList = res.data.list;

          console.log("街道数据", res);
        })
        .catch(() => {});
    },
    select2(item) {
      this.searchValue = item.name;
      this.villageName = item.name;
      this.villageId = item.id;

      setTimeout(() => {
        this.$refs.pageSearch.style.display = "none";
        this.$refs.save.style.zIndex = 99;
      }, 400);
    },
    select1(item) {
      this.searchValue = item.name;
      this.communityName = item.name;
      this.communityId = item.id;
      setTimeout(() => {
        this.$refs.pageSearch.style.display = "none";
        this.villageName = "请选择小区";
        this.$refs.save.style.zIndex = 99;
      }, 400);
    },
    select(item) {
      console.log(item);

      this.searchValue = item.name;
      this.strictName = item.name;
      this.strictId = item.id;
      setTimeout(() => {
        this.$refs.pageSearch.style.display = "none";
        this.communityName = "请选择社区";
        this.villageName = "请选择小区";
        this.$refs.save.style.zIndex = 99;
      }, 400);
    },
    hideToast() {
      this.$refs.pageSearch.style.display = "none";
    },
    save() {
      console.log(111);
      if (!this.villageId) {
        return this.$toast({
          message: "请先选择小区",
          position: "middle",
          duration: 1500,
        });
      }
      if (this.$route.query.a == "add") {
        this.$axios
          .post("/wx/recycleAddress", {
            openid,
            subDistrictId: this.strictId,
            communityId: this.communityId,
            villageId: this.villageId,
            address: this.detailAddress,
          })
          .then(({ data: res }) => {
            console.log("243", res);
            if (res.code != 0) {
              return this.$toast({
                message: res.msg,
                position: "middle",
                duration: 1500,
              });
            }
            this.$router.replace({
              name: this.fromPage,
            });
            this.strictName = "请选择街道";
            this.strictId = "";
            this.communityName = "请选择社区";
            this.communityId = "";
            this.villageName = "请选择小区";
            this.villageId = "";
            this.detailAddress = "";
          })
          .catch(() => {});
      } else if (this.$route.query.a == "edit") {
        this.$axios
          .put("/wx/recycleAddress", {
            id: this.$route.query.id,
            subDistrictId: this.strictId,
            communityId: this.communityId,
            villageId: this.villageId,
            address: this.detailAddress,
          })
          .then(({ data: res }) => {
            console.log("243", res);
            if (res.code != 0) {
              return this.$toast({
                message: res.msg,
                position: "middle",
                duration: 1500,
              });
            }
            this.$router.replace({
              name: "AddressList",
            });
            this.strictName = "请选择街道";
            this.strictId = "";
            this.communityName = "请选择社区";
            this.communityId = "";
            this.villageName = "请选择小区";
            this.villageId = "";
            this.detailAddress = "";
          })
          .catch(() => {});
      }
    },
  },
  data() {
    return {
      isShow: false,
      isShow1: false,
      isShow2: false,
      searchValue: "",
      strictName: "请选择街道",
      strictId: "",
      communityName: "请选择社区",
      communityId: "",
      villageName: "请选择小区",
      villageId: "",
      detailAddress: "",
      strictList: [],
      communityList: [],
      villageList: [],
    };
  },
};
</script>
<style lang="scss" scoped>
.add-address {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #f5f5f5;
  padding: 0.9375rem /* 15/16 */ 0.9375rem /* 15/16 */ 0;
  box-sizing: border-box;
  .s-c-v {
    width: 100%;
    height: 3.75rem /* 60/16 */;
    // line-height: 3.75rem /* 60/16 */;
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 1.3125rem /* 21/16 */;
    padding-right: 1.0625rem /* 17/16 */;
    box-sizing: border-box;
    margin-bottom: 0.625rem /* 10/16 */;
    span {
      &:first-of-type {
        font-weight: bold;
        font-size: 15px;
        color: #333;
      }
      &:nth-of-type(2) {
        img {
          width: 0.75rem /* 12/16 */;
          height: 1.25rem /* 20/16 */;
        }
      }
    }
  }
  .detail-address {
    background: #fff;
    // height: 8.75rem /* 140/16 */;
    // padding-top: 3.75rem /* 60/16 */;
    height: 12.5rem /* 200/16 */;
    box-sizing: border-box;
    span {
      font-weight: bold;
      font-size: 15px;
      color: #333;
      display: inline-block;
      width: 100%;
      height: 3.75rem /* 60/16 */;
      line-height: 3.75rem /* 60/16 */;
      padding-left: 1.3125rem /* 21/16 */;
      padding-right: 1.0625rem /* 17/16 */;
      box-sizing: border-box;
      position: relative;
      &::after {
        content: "";
        display: inline-block;
        width: calc(100vw - 4.25rem /* 68/16 */);
        height: 0;
        border-bottom: 0.5px solid #eeeeee;
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translate(-50%, 0);
      }
    }
    textarea {
      outline: none;
      border: none;
      padding: 10px 1.375rem /* 22/16 */ 0;
      box-sizing: border-box;
      width: 100%;
      height: 8.75rem /* 140/16 */;
    }
  }

  .save {
    width: 100vw;
    height: 3.75rem /* 60/16 */;
    line-height: 3.75rem /* 60/16 */;
    background-color: #fff;
    text-align: center;
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 99;
    button {
      border: none;
      outline: none;
      width: 21.25rem /* 340/16 */;
      height: 2.5rem /* 40/16 */;
      line-height: 2.5rem;
      text-align: center;
      border-radius: 1.25rem /* 20/16 */;
      color: #fff;
      background-color: #3ba32a;
      font-size: 15px;
      font-weight: bold;
    }
  }

  .page-search {
    display: none;
    height: 100%;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.3);
    .before {
      position: absolute;
      width: 100%;
      height: calc(100% - 52px);
      top: 52px;
      opacity: 0;
    }
  }
}
</style>
